<template>
  <div class="vitalSigns flex-y-start-stretch">
    <div class="flex-x-start" style="margin-left: -12px">
      <FirstHeader :title="'中央监护'" :file="'rescue'" :icon="'monitor-icon'"></FirstHeader>
      <el-checkbox-group v-model="ecgChecked" @change="checkboxChange" style="margin-top: 10px">
        <div class="switch flex-x-start">
          <div class="checkbox" v-for="(item, index) in ecgList" :key="index">
            <el-checkbox :label="item" size="large" />
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="monitor f1 px-15">
      <div class="monitorBg">
        <Wave ref="waveRef0"></Wave>
      </div>
      <div class="content flex-x-between-stretch">
        <div class="f1">
          <div class="item flex-x-start" v-if="ecgChecked[0]">
            <div class="name" style="color: #009c00">{{ ecgChecked[0] }}</div>
            <Wave ref="waveRef1" :option="{ strokeStyle: '#009c00', wavePre: 0.9 }"></Wave>
            <div class="unit unit1 mt-10" style="color: #009c00">
              <div>ECG</div>
              <div>Bpm</div>
              <div class="num">160</div>
              <div class="num">75</div>
            </div>
          </div>
          <div class="item flex-x-start" v-if="ecgChecked[1]">
            <div class="name" style="color: #009c00">{{ ecgChecked[1] }}</div>
            <Wave ref="waveRef2" :option="{ strokeStyle: '#009c00', wavePre: 0.7 }"></Wave>
            <div class="unit unit1 mt-10" style="color: #00d3fc">
              <div>Spo2</div>
              <div class="num mt-5">90</div>
              <div class="num">40</div>
            </div>
          </div>
          <div class="item flex-x-start">
            <Wave ref="waveRef3" :option="{ strokeStyle: '#416bb9', wavePre: 0.6 }"></Wave>
            <div class="unit" style="color: #416bb9">Paw</div>
          </div>
          <div class="item flex-x-start">
            <Wave ref="waveRef4" :option="{ strokeStyle: '#416bb9', wavePre: 0.6 }"></Wave>
            <div class="unit" style="color: #416bb9">Flow</div>
          </div>
          <div class="item flex-x-start">
            <Wave ref="waveRef5" :option="{ strokeStyle: '#416bb9', wavePre: 0.6 }"></Wave>
            <div class="unit" style="color: #416bb9">Vol</div>
          </div>
          <div class="item flex-x-start">
            <Wave ref="waveRef6" :option="{ strokeStyle: '#fcf947', wavePre: 0.6 }"></Wave>
            <div class="unit unit1" style="color: #fcf947">
              <div>Resp</div>
              <div class="key">rpm</div>
              <div class="num mt-5">30</div>
              <div class="num">8</div>
            </div>
          </div>
        </div>
        <div class="tips">
          {{ "HR过低<75" }}
        </div>
        <div class="waveData">
          <div class="text1 flex-x-between">
            <div class="textl"></div>
            <div class="value">60</div>
            <div class="f1 textr"></div>
          </div>
          <div class="text2 flex-x-between" v-if="ecgChecked[1]">
            <div class="textl"></div>
            <div class="value">80</div>
            <div class="f1 textr"></div>
          </div>
          <div class="text3 flex-x-between">
            <div class="textl">PIP</div>
            <div class="value">20</div>
            <div class="f1 textr">Pmean</div>
            <div class="value">7.0</div>
          </div>
          <div class="text3 flex-x-between">
            <div class="textl">PEEP</div>
            <div class="value">3.0</div>
            <div class="f1 textr">Pplat</div>
            <div class="value">20</div>
          </div>
          <div class="text3 flex-x-between">
            <div class="textl">PEF</div>
            <div class="value">20</div>
            <div class="f1 textr">Compl</div>
            <div class="value">45</div>
          </div>
          <div class="text3 flex-x-between">
            <div class="textl">PIF</div>
            <div class="value">15</div>
            <div class="f1 textr"></div>
          </div>
          <div class="text3 flex-x-between">
            <div class="textl">MVe</div>
            <div class="value">4.04</div>
            <div class="f1 textr">TVe</div>
            <div class="value">202</div>
          </div>
          <div class="text3 flex-x-between">
            <div class="textl">MVi</div>
            <div class="value">4.04</div>
            <div class="f1 textr">TVe</div>
            <div class="value">202</div>
          </div>
          <div class="text4 flex-x-between">
            <div class="textl"></div>
            <div class="value">20</div>
            <div class="f1 textr"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="dataBox flex-x-between">
      <div class="item" :class="{ warn: index == 0 }" v-for="(item, index) in dataList" :key="index">
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ item.key }}</div>
        <div class="unit">{{ item.unit }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onUnmounted, ref } from "vue";
import Wave from "@/components/wave/index.vue";
import WebSocketClient from "@/api/websocket";
import { ElMessage } from "element-plus";
import FirstHeader from "@/components/FirstHeader/index.vue";

// import { mockData } from "@/components/wave/mockData";
// 心率
const ecgList = ref<string[]>(["Ⅰ", "Ⅱ", "Ⅲ", "aVR", "aVL", "aVF"]);
const ecgChecked = ref<string[]>(["Ⅰ", "Ⅱ"]);

const checkboxChange = () => {
  if (ecgChecked.value.length > 2) {
    ecgChecked.value.splice(2, 1);
    ElMessage.error("最多选择两个导链");
  }
};
interface signsList {
  label?: string;
  key?: string;
  unit?: string;
}
const dataList = ref<signsList[]>([
  {
    label: "心率",
    key: "60",
    unit: "bpm"
  },
  {
    label: "血氧",
    key: "80",
    unit: "spo2"
  },
  {
    label: "氧浓度",
    key: "35",
    unit: "%"
  },
  {
    label: "潮气量",
    key: "490",
    unit: "mL"
  },
  {
    label: "吸气压力",
    key: "12",
    unit: "cmH2O"
  }
]);

let ws: WebSocketClient;
const waveRef0 = ref();
const waveRef1 = ref();
const waveRef2 = ref();
const waveRef3 = ref();
const waveRef4 = ref();
const waveRef5 = ref();
const waveRef6 = ref();

const handleWave = (data: any) => {
  waveRef1.value.setData(getWave(data, "ECG_I").wav);
  waveRef2.value.setData(getWave(data, "ECG_I").wav);
  waveRef3.value.setData(getWave(data, "ECG_I").wav);
  waveRef4.value.setData(getWave(data, "ECG_I").wav);
  waveRef5.value.setData(getWave(data, "ECG_I").wav);
  waveRef6.value.setData(getWave(data, "ECG_I").wav);
  // waveRef2.value.setData(getWave(data, "SpO2").wav);
  // waveRef3.value.setData(getWave(data, "RR").wav);
};
const handleClear = () => {
  waveRef1.value.clearData();
  waveRef2.value.clearData();
  waveRef3.value.clearData();
  waveRef4.value.clearData();
  waveRef5.value.clearData();
  waveRef6.value.clearData();
};
const getWave = (data: any[], key: string | any[]) => {
  return data.find((i: { name: any }) => key.includes(i.name)) || [];
};

let timer: NodeJS.Timeout | null;
const startWave = (eqIps: string) => {
  ws?.close();
  const params = {
    names: "ECG_I,SpO2,RR",
    eqIps
  };
  ws = new WebSocketClient("/wav_device_wav", params);
  ws.setMessageHandler(handleWave);
};
defineExpose({
  startWave,
  handleClear
});

onUnmounted(() => {
  ws?.close();
  clearInterval(timer!);
});
</script>
<style scoped lang="scss">
.switch {
  margin-left: 20px;
  margin-top: -10px;
  .checkbox {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #00b7f8;
      border-color: #00b7f8;
    }
    :deep(.is-checked) {
      .el-checkbox__label {
        color: #00b7f8;
      }
    }
    :deep(.el-checkbox) {
      color: #ffffff;
      .el-checkbox__label {
        padding-left: 5px;
        font-size: 16px;
      }
    }
  }
}
.waveData {
  width: 145px;
  margin-left: 20px;
  .text1 {
    color: #00ff00;
    font-size: 74px;
    line-height: 130px;
    margin-left: 20px;
  }
  .text2 {
    // color: #ff84ff;
    color: #00d3fc;
    font-size: 74px;
    // line-height: 105px;
    margin-top: -40px;
    margin-left: 20px;
  }
  .text4 {
    color: #ffff00;
    font-size: 74px;
    line-height: 70px;
    margin-top: 10px;
    margin-left: 20px;
  }
  .text3 {
    color: #5a94ff;
    font-size: 16px;
    line-height: 45px;
    .value {
      font-size: 20px;
      margin-right: 5px;
    }
  }
  .textl {
    text-align: left;
  }
  .textr {
    text-align: right;
  }
}
.dataBox {
  margin-top: 18px;
  .item {
    width: 100px;
    height: 115px;
    box-sizing: border-box;
    border-image: linear-gradient(0deg, #127baa, #119edb) 10 10;
    background: linear-gradient(0deg, rgba(0, 188, 254, 0.46) 39%, rgba(0, 255, 247, 0) 69%);
    border: 1px solid #119edb;
    border-radius: 10px;
    padding: 8px 11px;
    &.warn {
      border-image: linear-gradient(0deg, #db0101, #ec1a1a) 10 10;
      background: linear-gradient(0deg, rgba(230, 0, 0, 0.7) 39%, rgba(255, 0, 0, 0) 69%);
      border: 1px solid rgb(189, 49, 36);
    }
    .label {
      text-align: center;
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;
    }
    .value {
      font-size: 26px;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
      margin-bottom: 5px;
      margin-top: 16px;
    }
    .unit {
      font-size: 14px;
      color: #ffffff;
      text-align: right;
    }
  }
}
.vitalSigns {
  flex: 1;
  // width: 0;
  height: 100%;
  box-sizing: border-box;
  .title {
    font-size: 22px;
    color: #ffffff;
    padding-bottom: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    .icon {
      width: 25px;
      height: 25px;
      margin-right: 10px;
    }
  }
}
.monitor {
  width: 100%;
  height: 0;
  position: relative;
  .monitorBg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9;
    .tips {
      position: absolute;
      top: -4px;
      right: 26px;
      background-color: #ffff00;
      text-align: center;
      padding: 0 10px;
      line-height: 30px;
      font-size: 16px;
      color: #000000;
      border-radius: 3px;
      font-weight: bold;
    }
  }
  .item {
    width: 100%;
    height: calc((100% - 50px) / 6);
    margin-bottom: 10px;
    padding-right: 45px;
    position: relative;
    box-sizing: border-box;
    &:last-child {
      margin-bottom: 0;
    }
    .unit {
      position: absolute;
      left: calc(100% - 30px);
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
    }
    .unit1 {
      top: 0;
      transform: translateY(0);
      .key {
        font-size: 14px;
      }
      .num {
        font-size: 14px;
        text-align: right;
      }
    }
    .name {
      font-size: 20px;
      position: absolute;
      left: 5px;
      top: 5px;
    }
  }
}
</style>
